<template>
  <div class="ali-container">
    <div class="top"></div>
    <div class="bottom">
      <div class="header">
        <div class="close"></div>
        <div class="title">
          <div class="small-logo"></div>
          <div class="text">付款详情</div>
        </div>
        <div class="ques"></div>
      </div>
      <div class="message">
        <div class="show-money">¥<span class="money">{{order.money}}</span></div>
        <div class="detail">
          <div class="label">订单信息</div>
          <div class="value">{{order.id}}</div>
        </div>
        <div class="detail">
          <div class="label">付款方式</div>
          <div class="value">花呗</div>
        </div>
      </div>
      <div class="button">
        <Button class="pay-button" :loading="payLoading" type="primary" long @click="pay">{{payStatus}}</Button>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AliPay",
    data() {
      return {
        title: "",
        payStatus: "立即付款",
        payLoading: false,
        order: {
          id: null,
          money: null
        }
      }
    },
    props: {
      orderId: String,
    },
    methods: {
      getOrder() {
        this.$requests.get("/order/getOrder", {orderId: this.orderId}).then(res => {
          if (res.data.code === 0) {
            this.order = res.data.data;
          }
        })
      },
      pay() {
        this.payLoading = true;
        this.payStatus = "正在付款……";
        this.$requests.post("/order/pay", {
          id: this.orderId,
          pay: 2
        }).then(res => {
          setTimeout(() => {
            if (res.data.code === 0) {
              this.$Message.success("付款成功");
              setTimeout(() => {
                this.$router.push("/payok");
              }, 1000);
            } else {
              this.$Message.error(res.data.msg);
            }
            setTimeout(() => {
              this.payLoading = false;
              this.payStatus = "立即付款";
            }, 500);
          }, 1000)
        })
      }
    },
    created() {
      this.getOrder();
    }
  }
</script>

<style lang="less" scoped>
  .ali-container {
    height: 100%;

    .top {
      height: 33%;
      background: black;
      opacity: 0.8;
    }

    .bottom {
      height: 66%;
      color: #0d0d0d;

      .header {
        height: 45px;

        .close {
          float: left;
          width: 20%;
          height: 45px;
          background: url("../../assets/alipay/close.png") no-repeat left;
          background-size: 40px 40px;
        }

        .title {
          float: left;
          width: 60%;
          padding-left: calc(30% - 70px);

          .small-logo {
            float: left;
            width: 45px;
            height: 45px;
            background: url("../../assets/alipay/small_logo.png") no-repeat center;
            background-size: 20px 20px;
          }

          .text {
            float: left;
            width: 70px;
            height: 45px;
            font-size: 17px;
            font-weight: bold;
            line-height: 45px;
          }
        }

        .ques {
          float: left;
          width: 20%;
          height: 45px;
          background: url("../../assets/alipay/que.png") no-repeat right;
          background-size: 45px 45px;
        }
      }

      .message {
        height: 66%;
        padding-top: 20%;

        .show-money {
          text-align: center;
          font-weight: bold;
          font-size: 20px;

          .money {
            font-size: 40px;
          }
        }

        .detail {
          height: 45px;
          padding: 0 20px 0 20px;
          line-height: 45px;

          .label {
            float: left;
            color: #989898;
          }

          .value {
            float: right;
          }
        }
      }

      .button {
        height: 15%;
        font-size: 15px;
        padding: 0 20px;

        .pay-button {
          height: 45px;
          line-height: 45px;
          background: #198de0;
          color: white;
          text-align: center;
          border-radius: 5px;
        }
      }

      .footer {
        height: 45px;
        background: url("../../assets/alipay/footer.png") no-repeat center;
        background-size: 60%;
      }
    }
  }
</style>
